<template>
    <div>
        <div class="registerBox" v-if="isShowRegister">
            <img class="registerImgBg" src="~SYSTEM_IMAGE/images/login_bg.jpg" />
            <div class="registerMain">
                <div class="registerMainLeft">
                    <div class="userHeaderBox">
                        <img src="~SYSTEM_IMAGE/test/logo.jpg" />
                    </div>
                    <div class="userInfoBox">
                        云应用是面快速开发的应用场景，为开发者提供的一键构建后端应用运行环境、后端服务部署、运维监控等能力的一站部署服务，不需要购买和部署服务器，通过 API 方式即可获取云函数、数据存储、文件存储、音视频、图像处理等服务。降低开发门槛。
                    </div>
                    <div class="userBottomInfoBox">
                        ——— EasyD维护团队
                    </div>
                </div>
                <div class="registerMainRight">
                    <div class="registerCloseBtn" @click="registerCloseClick">
                        <i class="fa fa-close fa-lg"></i>
                    </div>
                    <div class="registerTitle">注册</div>
                    <div class="registerContent">
                        <div class="registerInputItem">
                            <el-input
                                placeholder="请输入帐号"
                                v-model="username"
                                suffix-icon="fa fa-user fa-lg">
                            </el-input>
                        </div>
                        <div class="registerInputItem">
                            <el-input
                                placeholder="请输入密码"
                                v-model="password"
                                type="password"
                                suffix-icon="fa fa-key fa-lg">
                            </el-input>
                        </div>
                    </div>
                    <div class="userClauseBox">
                        <el-checkbox style="color:#999;" label="我已阅读并同意EasyD云服务使用条款" name="type"></el-checkbox>
                    </div>
                    <div class="registerBtnBox">
                        <el-button type="primary" @click="handleRegsiter">立即注册</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
                username : '',
                password : ''
            }
        },
        //初始化函数
        mounted() {

        },
        //计算属性
        computed: {
            ...mapState({
                isShowRegister : state => state.RegisterModule.isShowRegister
            })
        },
        //组件方法
        methods: {
            handleRegsiter(){

                //验证操作
                

                
            },
            registerCloseClick(){
                this.$store.commit('RegisterModule/updateRegister',false)
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
.registerBox {
  position absolute
  left 0px
  right 0px 
  overflow  none
  top 0px 
  bottom 0px
  background #fff
  z-index 9999999

  .registerImgBg{
    position absolute
    left 0px
    top 0px
    width 100%
    height 100%
    object-fit: cover;
  }

  .registerMain {
      width 860px
      height 500px
      position absolute
      top 50%
      left 50%
      margin-left -430px
      margin-top -250px
      background #fff
      padding-top 30px
      padding-bottom 30px
      box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
      border-radius 8px
      box-sizing border-box

      
      .registerMainLeft {
          width 50%
          height 100%
          background #fff
          float left

          .userHeaderBox {
              width 80px
              height 80px
              border-radius 50%
              margin 70px auto
              margin-bottom 30px
              background #ccc

              img {
                width 100%
                height 100%
              }
          }

          .userInfoBox {
              width 100%
              height auto
              padding-left 40px
              line-height 24px
              padding-right 40px
              text-align: justify;
              color #666
              box-sizing border-box
          }

          .userBottomInfoBox {
              width 100%
              height 60px
              line-height 60px
              padding-left 40px
              box-sizing border-box
              padding-right 40px
              text-align right
              color #999
          }
      }

      .registerMainRight {
          width 50%
          border-left 1px solid #eee
          box-sizing border-box
          height 100%
          float right

          .registerCloseBtn {
              width 30px
              height 30px
              position absolute
              right 10px
              border-radius 50%
              top 10px
              text-align center
              line-height 30px
              background #eee
              cursor pointer

              i {
                  color #999
              }
          }

          .registerBtnBox {
              width 100%
              height 45px
              margin-top 10px
              padding-left 42px
              box-sizing border-box
              padding-right 40px
          }

          .userClauseBox {
              width 100%
              height 30px
              padding-left 42px
              box-sizing border-box
              padding-right 40px
          }

          .registerTitle {
              width 100%
              height 40px
              box-sizing border-box
              padding-right 40px
              padding-left 40px
              font-size 20px
              margin-top 70px
          }

          .registerContent {
              width 100%
              box-sizing border-box
              padding-right 40px
              padding-left 40px
              height auto
              margin-top 20px

              .registerInputItem {
                  width 100%
                  height 45px
                  margin-bottom 20px
              }

          }

      }
  }
}
</style>